<template>
	<view class="w-100 h-100 re">
		<movable-area class=" w-100 h-100 ab top0 bottom0 left0 ty-circle" style="overflow: hidden;">
			<movable-view class="view re" :x="x" :y="y" direction="all">
				<ImageFile :url="floor_pic" className="img"/>
				
				<view v-for="(item,index) in floor_info.pointList" :key="item.id" class="w84 h84 ab" :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;'" @click="get_point_info(item)">
					<view class="w-100 h-100 ab top0 left0 f-c-c font32 font700 t-0">{{item.code}}</view>
					<image src="../../../static/icon_map_show.png" class="w-100 h-100"/>
				</view>
			</movable-view>
		</movable-area>
		<view class="ab top38 left28 bg-theme_7 show0 circle36" style="padding: 4rpx;">
			<view class="w72 h72 f-c-c rounded-circle mb-2" :class="floor_info.id==page.id?'bg-white t-20':'t-ba'" @click="set_floor(index)" v-for="(page,index) in item" :key="index">{{index+1}}F</view>
		</view>
		<view class="ab top38 right28 show0 h60 f-b-c w358 bg-white circle100 px-2">
			<view>
				<input class="w232 h42 px-1 font28 t-0 ty-input" @blur="show_point = false"  @focus="show_point = true" @input="changeName" v-model="address" placeholder="查找游戏地点" />
			</view>
			<image src="../../../static/icon_search.png" class="w48 h48"/>
			<!-- 点位信息 -->
			<view class="ab w-100 left0 top64 bg-white circle12 p-1 show0 z-9999" v-show="show_point">
				<view class="p-1 f-b-c border-bottom font26 t-20" @click="get_move(item)" v-for="(item,index) in pointList" :key="item.id">
					<view>{{item.name}}</view>
					<view>{{item.code}}</view>
				</view>
			</view>
		</view>
		
		<view class="ab top138 right28 " @click="get_badge">
			<image src="../../../static/icon_badge.png" class="w100 h100 p-05 bg-white rounded-circle show0" /></image>
		</view>
		
	
		
	</view>
</template>

<script>
	import {mapActions} from "vuex"
	import ImageFile from "../../../components/img_file.vue"
	export default {
		components:{ImageFile},
		props:{
			item:{}
		},
		data() {
			return {
				floor_pic:"",
				floor_info:{}, // 楼层信息
				floor:0,// 当前楼层下标
				address:"", //查找游戏地点
				area_w:0, // 移动的区域宽度
				area_h:0, // 移动区域的高度
				x: 1,
				y: 1,
				old: {
					x: 30,
					y: 30
				},
				time:0,
				show_point:false,
				pointList:[],
			}
		},
		created() {
			this.get_floor()
			const {statusBarHeight,screenHeight,screenWidth} = uni.getStorageSync("systemInfo")
			let bar_hright = statusBarHeight/(uni.upx2px(100)/100)  // 状态栏高度
			// 屏幕高度 - 不可移动区域的高度
			this.area_h = screenHeight/(uni.upx2px(100)/100) - ( bar_hright + 100 + 80 )  //+140 // 100 头部标题栏 80 顶部导航栏 // 140 地图分类
			this.area_w = screenWidth/(uni.upx2px(100)/100)  // 宽度
			
			console.log(this.area_h,this.area_w)
		},
		watch:{
			item:{
				handler: function (val) {
					this.x = 0
					this.y = 0
					this.floor = 0
					this.get_floor()
				},
				deep: true
			}
		},
		methods: {
			...mapActions('map',['set_point_info']),
			get_badge(){
				uni.navigateTo({
					url:"/pages/my/badge/badge"
				})
			},
			 // 切换楼层
			get_floor(){
				let floor_info = {}
				// 默认显示第一层
				if(this.item && this.item?.length){
					floor_info = this.item[this.floor] || {}
				}
				this.floor_info = JSON.parse(JSON.stringify(floor_info))
				this.floor_pic = floor_info.pic || ''
				
				this.pointList = this.floor_info?.pointList ? [...this.floor_info?.pointList] : []
				
				this.$forceUpdate()
			},
			set_floor(index){
				this.floor = index
				this.x = 0
				this.y = 0
				this.get_floor()
			},
			get_move(val) {
				this.x = this.old.x
				this.y = this.old.y
				// x = 点位置 - 框宽的一半 + 图片宽度一半
				// y = 点位置 - 框高的一半 + 图片高度一半
				this.$nextTick(function() {
					this.x = - (parseFloat(val.x) - (this.area_w /2) + (84/2)) / 2
					this.y = - (parseFloat(val.y) - (this.area_h / 2) + (84/2)) / 2
				})
			},
			// 输入获取点位
			changeName(val){
				if(!this.time){
					let name = val.detail?.value || ''
					this.time = setTimeout(()=>{
						let array = []
						this.floor_info?.pointList?.map(item=>{
							if(item.name?.indexOf(name) > -1){
								array.push(item)
							}
						})
						this.pointList = array
						this.time = 0
					},400)
				}
			},
			// 存储数据 显示弹窗
			get_point_info(val){
				// 存储数据
				this.set_point_info(val)
				// 显示弹窗 弹窗在父级
				this.$parent.show_point()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.ty-input{
		border: none;
		border-right: 1rpx solid #ccc;
	}
	.h1224{
		height: 1224rpx;
	}
	.w3000{
		width: 2250rpx;
	}
	.h2000{
		height: 2810rpx;
	}
	.aa {
		width: 100%;
		position: fixed;
		bottom: 240rpx;
		left: 0;
		z-index: 99;

		text {
			background-color: #fff;
			padding: 10rpx;
			margin-left: 20rpx;
		}
	}
	.top900{
		top: 900rpx;
	}
	.left1200{
		left: 1200rpx;
	}
	.view {
		width: 1638rpx;
		height: 834rpx;
	}
	.bg-theme_7{
		.mb-2{
			&:last-child{
				margin-bottom: 0 !important;
			}
		}
	}

</style>
